<template>
  <app-page card full>
    <app-page-main>
      <template #header>
        <div class="app-query"></div>
        <div class="app-action">
          <el-button type="primary" plain icon="plus" @click="pageActions.handleAdd()">添加</el-button>
        </div>
      </template>

      <el-table v-loading="pageData.loading" :data="pageData.data" stripe style="width: 100%">
        <el-table-column prop="username" label="账号" show-overflow-tooltip></el-table-column>
        <el-table-column prop="nickname" label="姓名" show-overflow-tooltip></el-table-column>
        <el-table-column prop="mobile" label="手机号" show-overflow-tooltip></el-table-column>
        <el-table-column label="用户角色" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.roleName }}
          </template>
        </el-table-column>
        <el-table-column label="用户状态">
          <template #default="{ row }">
            <el-switch
              :before-change="
                () =>
                  pageActions.handleUpdate(
                    row,
                    { isOpen: !row.isOpen },
                    !row.isOpen ? '确认上线？' : '确认下线？',
                    '已修改'
                  )
              "
              v-model="row.isOpen"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300px" fixed="right">
          <template #default="{ row }">
            <el-button link type="primary" icon="edit" @click="pageActions.handleEdit(row)">编辑</el-button>
            <el-button link type="primary" icon="refresh" @click="hanldeResetPassword(row.id)">
              重置密码
            </el-button>
            <el-button link type="primary" icon="delete" @click="pageActions.handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </app-page-main>

    <!-- 新增/编辑 -->
    <jax-dialog-edit
      v-model="pageData.detail"
      v-model:show="pageData.shwoEdit"
      :json="formJson"
      @submit="pageActions.handleSubmit()"
      :id-key="pageData.key"
    />
  </app-page>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { usePageList, http } from 'jax-node'

const { query } = useRoute()
const { pageData, pageActions } = usePageList()

const roleList = ref([])
const departmentList = ref([])

const formJson = computed(() => {
  const fixed = false
  const required = true
  const miniInput = { style: 'width:100px' }

  return [
    { name: 'username', label: '账号', required },
    { name: 'nickname', label: '姓名' },
    { name: 'mobile', label: '手机号', inputAttr: { 'auto-complete': 'new-password' } },
    {
      name: 'password',
      label: '用户密码',
      type: 'password',
      placeholder: pageData.detail[pageData.key] ? '不修改请留空' : '不填写使用默认密码',
      inputAttr: { autocomplete: 'new-password' },
    },
    { name: 'roleId', label: '用户角色', type: 'select', options: roleList.value, required },
    // { name: 'departmentId', label: '组织架构', type: 'select', options: departmentList.value },
  ]
})

// 保存前
// pageActions.handleBeforeSubmit = detail => {
//   detail.systemType = query.systemType
//   detail.sourceId = query.sourceId
// }

// 重置密码
const hanldeResetPassword = adminId => {
  ElMessageBox.confirm('确认重置密码?', '提示', {
    type: 'warning',
  }).then(() => {
    http
      .post(`/system/user/reset-password`, {
        adminId,
      })
      .then(() => {
        ElMessage.success('重置成功')
      })
  })
}

// 获取系统角色
function getRoleList() {
  http('/system/role', {
    params: {
      isOpen: true,
      systemType: query.systemType,
      sourceId: query.sourceId,
    },
  }).then(res => {
    roleList.value = res.list.map(item => {
      return {
        ...item,
        label: item.roleName,
        value: item.id,
      }
    })
  })
}

// 获取部门列表
const departmentListRes = () => {
  http
    .get(`/system/department`, {
      params: {
        systemType: query.systemType,
        sourceId: query.sourceId,
      },
    })
    .then(res => {
      departmentList.value = res.list.map(item => {
        return { label: item.departmentName, value: item.departmentId }
      })
    })
}

getRoleList()
</script>

<style lang="scss" scoped></style>
